<script lang="ts" setup>
import DictionaryShow from '@/components/dictionary/DictionaryShow.vue'
import LeaderShow from '@/components/leader/LeaderShow.vue'
import { formatDateStr } from '@/plugins/date'

import useFetch from '@/hooks/useFetch'
import { getDeadlinesByMatterId } from '@/api/mission/thing'
import PreviewFileTable from './PreviewFileTable.vue'
import StateTag from './StateTag.vue'
import { createReusableTemplate } from '@vueuse/core'

const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
const props = withDefaults(
  defineProps<{
    matterId?: number
    matterInfo?: Record<string, any>
  }>(),
  {
    matterId: 0,
    matterInfo: () => ({}),
  },
)

const { loading, res: matterDeadlinesList } = useFetch<Record<string, any>>(
  getDeadlinesByMatterId,
  props.matterId,
  true,
)
</script>

<template>
  <DefineTemplate v-slot="{ $slots, title }">
    <div class="description-item flex">
      <div class="description-item-label">{{ title }}：</div>
      <div class="description-item-content flex-1">
        <component :is="$slots.default"></component>
      </div>
    </div>
  </DefineTemplate>
  <div v-loading="loading">
    <div class="description-wrap flex justify-between flex-wrap">
      <ReuseTemplate title="事项标题">
        {{ matterInfo?.matterTitle ?? '' }}
      </ReuseTemplate>
      <ReuseTemplate title="业务领域">
        <DictionaryShow
          parent-dictionary-value="runway"
          :value="matterInfo?.domainId"
        />
      </ReuseTemplate>
      <ReuseTemplate title="交办领导">
        <LeaderShow :leader-id="matterInfo?.assignLeader" />
      </ReuseTemplate>
      <ReuseTemplate title="交办类型">
        <DictionaryShow
          parent-dictionary-value="taskType"
          :value="matterInfo?.assignType"
        />
      </ReuseTemplate>
      <ReuseTemplate title="责任领导">
        <LeaderShow :leader-id="matterInfo?.responsibleLeader" />
      </ReuseTemplate>
      <ReuseTemplate title="重点关注">
        <span>{{ matterInfo?.isFocus === 1 ? '是' : '否' }}</span>
      </ReuseTemplate>
      <ReuseTemplate title="事项状态">
        <StateTag :status="matterInfo?.matterStatus" />
      </ReuseTemplate>
      <ReuseTemplate title="牵头单位">
        <span class="des-item">{{ matterInfo?.leadUnitName ?? '' }}</span>
      </ReuseTemplate>
      <ReuseTemplate title="办理要求">
        <span class="des-item">{{ matterInfo?.handleRequire ?? '' }}</span>
      </ReuseTemplate>
      <ReuseTemplate title="抄送单位">
        <span class="des-item">{{ matterInfo?.ccUnitNames ?? '' }}</span>
      </ReuseTemplate>
    </div>
    <div class="events_title">办理期限</div>
    <el-table :data="matterDeadlinesList" stripe>
      <el-table-column label="期限" prop="deadlineDate">
        <template #default="{ row }">
          {{ formatDateStr(row.deadlineDate, 'YYYY年MM月DD日') }}
        </template>
      </el-table-column>
      <el-table-column label="关键期限" prop="isKey">
        <template #default="{ row }">
          <span>{{ row.isKey === 1 ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="期限要求" prop="deadlineRequire" />
    </el-table>
    <div class="events_title">附件列表</div>
    <PreviewFileTable :file-list="matterInfo?.fileList" />
  </div>
</template>

<style lang="scss" scoped>
.description-item {
  width: 30%;
  margin-bottom: vh(20);

  &-label {
    color: rgba(208, 222, 238, 1);
  }
}
</style>
